<template>  
  <div>  
    <!-- 模态框 -->  
    <div v-if="visible" class="modal-overlay">  
      <div class="modal-container">
        <button class="close-button" @click="$emit('close')">关闭</button>  
        <div class="modal-header">  
          <h2>装配指令:前机身框架装配</h2> 
             
              <select v-model="selectedxinghao"> 
                <h3>选择型号</h3> 
                <option value="A">A型</option>  
                <option value="B">B型</option>   
              </select>  
              <select v-model="selectedpici"> 
                <h3>选择批次</h3> 
                <option value="one">一批</option>  
                <option value="two">二批</option>   
              </select>   
              <button>切换</button> 
        </div>  
        <div class="modal-body">
            <table>  
                <thead>  
                    <tr>
                    <th>选择</th>  
                    <th>序号</th>  
                    <th>AO名称</th>  
                    <th>AO编号</th>  
                    <th>AO代号</th>  
                    <th>是否关重</th>  
                    <th>是否人工</th>  
                    <th>替代指令</th>  
                    <th>AO类别</th>  
                    <th>齐套率</th>  
                    <th>详细指令</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <!-- 假设表格数据分为两个批次，A型和B型在这里合并处理，因为图片中只显示了A型数据 -->  
                    <tr v-for="(item, index) in assemblyInstructions" :key="index"> 
                    <td><input type="checkbox" :value="item.id" v-model="selectedassemblyInstructions" @change="selectedassemblyInstruction(item.id)"></td> 
                    <td>{{ index + 1 }}</td> <!-- 序号从1开始 -->  
                    <td>{{ item.aoName }}</td>  
                    <td>{{ item.aoNumber }}</td>  
                    <td>{{ item.aoCode }}</td>  
                    <td>{{ item.isCritical ? '是' : '否' }}</td>  
                    <td>{{ item.isManual ? '是' : '否' }}</td>  
                    <td>{{ item.alternativeInstruction }}</td>  
                    <td>{{ item.aoCategory }}</td> <!-- 注意：图片中未明确AO类别的具体值，这里假设是一个字符串 -->  
                    <td>{{ item.completenessRate }}%</td> <!-- 假设齐套率是一个百分比 -->  
                    <td>
                      <button @click="viewPdf(item.pdfUrl)">查看</button>
                    </td> 
                    </tr>  
                </tbody>  
    </table> 
    <button @click="exportData">导出</button>
        </div>
      </div> 
  </div>
  </div> 
</template>  
  
<script>
export default {  
  name:'ModalModala',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
  },
  data() {  
    
    return { 
      selectedType: '',  
      selectedBatch: '',  
      types: ['A型', 'B型'],  
      batches: ['1批', '2批'],  
      headerText: '默认文本',  
      // 假设的表格数据  
      tableData: [  
        // ...数据项  
      ],  
      selectedRows: [],
      assemblyInstructions: [  
        {  
          aoName: 'FAOG-T1',  
          aoNumber: 'FC531G300005',  
          aoCode: '26A0101',  
          isCritical: true,  
          isManual: false,  
          alternativeInstruction: '铆接',  
          aoCategory: '某类别', // 假设值  
          completenessRate: 70, // 假设值  
          detailedInstruction: '这里是详细的装配指令内容...'  
        },  
        {  
          aoName: '另一个AO名称',  
          aoNumber: '另一个编号',  
          aoCode: '另一个代号',  
          isCritical: false,  
          isManual: true,  
          alternativeInstruction: '其他指令',  
          aoCategory: '另一类别', // 假设值  
          completenessRate: 90, // 假设值  
          detailedInstruction: '这里是另一个详细的装配指令内容...'  ,
          pdfUrl:'https://example.com/ao001.pdf',
        }  
        // 可以根据需要添加更多数据项  
      ]  
    };  
  },  
  methods: {  
    viewPdf(url) {  
      // 打开PDF文件的URL  
      window.open(url, '_blank');  
    }  ,
    updateHeaderText() {  
      this.headerText = `选择的型号: ${this.selectedType}, 选择的批次: ${this.selectedBatch}`;  
    },  
    exportData() {  
      // 这里实现数据导出的逻辑  
      // 例如，可以使用FileSaver.js或Blob对象来下载CSV或Excel文件  
      console.log('导出数据逻辑应在这里实现');  
    }  
  }  
}; 
</script>
<style scoped>  
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-container {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 100%;
  max-width: 1000px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
